<template>
  <el-dialog
    v-model="dialogVisible"
    title="新增"
    width="1400"
    :before-close="
      () => {
        dialogVisible = false
      }
    "
  >
    <el-table
      :data="list"
      :header-cell-style="{ background: '#f5f7fa' }"
      border
      stripe
      style="width: 100%"
      height="500"
      highlight-current-row
    >
      <template v-for="item in column" :key="item.value">
        <el-table-column
          v-if="item.isShow == 'true'"
          align="center"
          :label="item.label"
          :width="item.width"
          height="500"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-input
              v-if="item.type == 'text'"
              type="text"
              v-model="scope.row[item.value]"
              :disabled="item.isEdit == 'false'"
              placeholder="请输入"
              style="width: 90%"
            />
            <el-select
              v-if="item.type == 'select'"
              v-model="scope.row[item.value]"
              :disabled="item.isEdit == 'false'"
              filterable
              clearable
              placeholder="请选择"
              style="width: 90%"
            >
              <el-option
                v-for="_ in item.cmbInfo"
                :key="_.value"
                :label="_.label"
                :value="_.value"
              />
            </el-select>
            <el-input
              v-if="item.type == 'number'"
              type="number"
              v-model="scope.row[item.value]"
              :disabled="item.isEdit == 'false'"
              placeholder="请输入"
              style="width: 90%"
            />
            <el-date-picker
              v-if="item.type == 'date'"
              type="date"
              v-model="scope.row[item.value]"
              :disabled="item.isEdit == 'false'"
              placeholder="请选择"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 90%"
            />
          </template>
        </el-table-column>
      </template>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSave"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watchEffect } from 'vue'
import * as BasicApi from '@/api'
import { isDate, formatDate } from '@/utils/formatDate'
import { objectToQueryParams } from '@/utils/objectToQuery'
import { useMessage } from '@/hooks/useMessage'
import { getColWidth, setLastWidth } from './FormatData'
const props = defineProps(['type', 'partParams'])

const column = ref<any[]>([])
const list = ref<any[]>([])

const dialogVisible = ref(false)

const open = async (row: any) => {
  const inputStr = objectToQueryParams({
    ...props.partParams,
    operType: 'Add'
  })
  const res = (await BasicApi.Query({ inputStr })) as any
  if (res.code !== 200) {
    message.error(res.msg)
    return
  }
  const { listInfo, fieldInfo } = res.data
  list.value = listInfo || []
  column.value = fieldInfo || []
  dialogVisible.value = true
}
defineExpose({ open })
const emit = defineEmits(['refresh'])
const submitData = reactive<any>({})
const message = useMessage()
const onSave = async () => {
  //格式化数据
  // form.value.items.map((item: any) => {
  //   submitData[item.key] = item.value
  // })
  const inputStr = objectToQueryParams({
    groupName: props.partParams.groupName,
    jobType: props.partParams.jobType,
    operType: 'Save'
  })
  const result = (await BasicApi.Operate({ inputStr, jsonData: list.value })) as any
  const { code, msg } = result
  if (code !== 200) {
    message.error(msg)
    return
  }
  message.success(msg)
  dialogVisible.value = false
  emit('refresh')
}

watchEffect(() => {
  if (column.value.length) {
    column.value = getColWidth(column.value, 1360)
    setLastWidth(column.value, 1360)
  }
})
</script>
